<template>
  <div>
    <form style="margin-bottom:16px" class="authing-form animate-box no-shadow">
      <div
        v-show="opts.forceLogin"
        class="__authing_force_login_tips"
        style="text-align:center"
      >
        <p>输入帐号密码登录</p>
        <p>如果您没有帐号，我们会自动创建</p>
      </div>

      <div class="_authing_form-group">
        <input
          type="text"
          class="_authing_input _authing_form-control"
          id="ad-login-username"
          v-model="email"
          placeholder="请输入 AD 的用户名"
          autocomplete="off"
          @keydown.13="handleADLogin"
        />
      </div>
      <div class="_authing_form-group">
        <input
          type="password"
          class="_authing_input _authing_form-control"
          id="ad-login-password"
          v-model="password"
          :placeholder="opts.placeholder.password"
          autocomplete="off"
          @keydown.13="handleADLogin"
        />
      </div>
      <div v-show="loginVerifyCodeVisible" class="form-group verify-code">
        <input
          type="text"
          class="_authing_input _authing_form-control"
          id="ad-verify-code"
          v-model="verifyCode"
          :placeholder="opts.placeholder.verfiyCode"
          autocomplete="off"
          @keydown.13="handleADLogin"
        />

        <div
          class="_authing_verify-code-loading-circle"
          v-show="loginVerifyCodeLoading"
        ></div>
        <img
          :src="verifyCodeUrl"
          id="verify-code-img"
          v-show="!loginVerifyCodeLoading"
          @load="handleLoginVerifyCodeLoaded"
        />
      </div>
      <div class="row backup">
        <div class="_authing_form-group" style="margin-bottom:0px;">
          <label class="_authing_label" for="login-remember" style="width:100%">
            <!--<input class="_authing_input" type="checkbox" id="login-remember" style="vertical-align: middle; margin: 0"
                             v-model="rememberMe"><span
            style="vertical-align: middle"> 记住我</span>-->
            <a class="_authing_a" @click="gotoUsingPhone">使用手机登录</a>
          </label>
        </div>

        <div style="font-size:14px">
          <a class="_authing_a" @click="gotoForgetPassword">忘记密码？</a>
        </div>
      </div>
    </form>
    <div class="_authing_form-footer login" v-show="!opts.hideUP">
      <button @click="handleADLogin" class="btn btn-primary">
        <span v-show="!formLoading">登录</span>
      </button>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
  created() {
    this.$authing = this.$root.$data.$authing;
    this.opts = this.$root.$data.$authing.opts;
  },
  data() {
    return {
      verifyCode: "",
      verifyCodeUrl: "",
      email: "",
      password: ""
    };
  },
  computed: {
    ...mapGetters("loading", {
      loginVerifyCodeLoading: "loginVerifyCode",
      formLoading: "form"
    }),
    ...mapGetters("visibility", {
      loginVerifyCodeVisible: "loginVerifyCode"
    })
  },
  methods: {
    ...mapActions("visibility", [
      "changeVisibility",
      "gotoForgetPassword",
      "gotoUsingPhone"
    ]),
    ...mapActions("loading", ["changeLoading"]),
    ...mapActions("data", [
      "showGlobalMessage",
      "removeAnimation",
      "removeRedLine",
      "addRedLine",
      "addAnimation",
      "recordLoginInfo"
    ]),
    ...mapActions("protocol", ["handleProtocolProcess"]),
    handleLoginVerifyCodeLoaded() {
      this.changeLoading({ el: "loginVerifyCode", loading: false });
    },
    handleADLogin() {
      const that = this;
      const adLoginInfo = {
        adConnectorId: window.adConnector._id,
        username: that.email,
        password: that.password
      };
      if (!this.password) {
        this.showGlobalMessage({
          type: "error",
          message: "请输入密码"
        });
        this.addAnimation("ad-login-password");
        this.removeRedLine("ad-verify-code");
        this.removeRedLine("ad-login-username");
        this.changeLoading({ el: "form", loading: false });
        this.$authing.pub("login-error", "请输入密码");
        this.$authing.pub("authenticated-error", "请输入密码");
        return false;
      }
      if (!this.email) {
        this.showGlobalMessage({
          type: "error",
          message: "请输入用户名"
        });
        this.addAnimation("ad-login-username");
        this.removeRedLine("ad-verify-code");
        this.removeRedLine("ad-login-password");
        this.changeLoading({ el: "form", loading: false });
        this.$authing.pub("login-error", "请输入密码");
        this.$authing.pub("authenticated-error", "请输入密码");
        return false;
      }
      this.changeLoading({ el: "form", loading: true });
      validAuth
        .loginByAd(adLoginInfo)
        .then(data => {
          /*
          if (that.rememberMe) {
            localStorage.setItem("_authing_username", that.email);
            localStorage.setItem(
              "_authing_password",
              that.encrypt(that.password, that.$authing.opts.clientId)
            );
          } else {
            localStorage.removeItem("_authing_username");
            localStorage.removeItem("_authing_password");
          }
*/
          this.showGlobalMessage({
            type: "success",
            message: "验证通过，欢迎你：" + (data.username || data.email)
          });
          that.recordLoginInfo(data);
          that.$authing.pub("login", data);
          that.$authing.pub("authenticated", data);
          this.handleProtocolProcess({ router: this.$router });
          this.changeLoading({ el: "form", loading: false });
        })
        .catch(err => {
          this.changeLoading({ el: "form", loading: false });
          this.showGlobalMessage({
            type: "error",
            message: err.message.message
          });
          that.$authing.pub("login-error", err);
          that.$authing.pub("authenticated-error", err);
          if (
            err.message.code === 2006 ||
            err.message.code === 2016 ||
            err.message.code === 2027
          ) {
            that.addAnimation("login-password");
            that.removeRedLine("verify-code");
            that.removeRedLine("login-username");
          }
        });
    }
  }
};
</script>
<style scoped></style>
